import React, {useState, useRef} from 'react';
import {Button, message, Form, Input, FormInstance} from 'antd';
import { request } from 'umi';
import ProForm, {
  ModalForm,
  ProFormText,
} from '@ant-design/pro-form';
import {createDashboard, editDashboard} from "@/services/ant-design-pro/api";




export default (props: any) => {
  const formRef = useRef<FormInstance>();
  const [ModalFormVisible,setModalFormVisible] = useState(false)

  return (
    <ModalForm<{
      dashboardName: string;
    }>
      formRef={formRef}
      title={props.name}
      visible={ModalFormVisible}
      width='400px'
      onVisibleChange = {setModalFormVisible}
      trigger={
        props.trigger
      }

      modalProps={{
        afterClose: () => formRef.current?.resetFields(),
      }}
      onFinish={async (values) => {

        const url = props?.curDashboard ? editDashboard() : createDashboard();
        request(url, {
          method: 'POST',
          params: {
            dashboardName: values.dashboardName,
            id: props?.curDashboard?.value ? props?.curDashboard?.value : 0,
          },
          skipErrorHandler: true,
        }).then( data => {
          message.success(data.message);
          if (data.code === 200){
            setModalFormVisible(false);
            props.toRefreshDashboardNameList();
            props.curDashboard ? props.updateCurDashboardName(props?.curDashboard?.value,values.dashboardName)
              :
              props.updateCurDashboardName(data.data.id,data.data.dashboardName)
            return true;
          }else {
            return false;
          }

        });

      }}
    >
      <ProForm.Group>
        <ProFormText
          width="md"
          name="dashboardName"
          label="大盘名称"
          initialValue={ props?.curDashboard?.label }
          rules={[{required: true}]}
          placeholder="大盘名称" />
      </ProForm.Group>

    </ModalForm>
  );
};
